import React, { Component } from 'react'
import { Icon, Form, Input, Button } from 'antd'
import { login } from '../../actions/user'
import { connect } from 'react-redux'
import actionType from '../../actions/actionTypes'
import { Fragment } from 'react'
class Center extends React.Component({
    render() {
        retunr(
            <Fragment>
                <div className="login-box">
                    <div className="tree">
                        <img src={componentData.imgUrl.logoPlant} className="img-fluid" />
                    </div>
                    <div className="slogan">
                        安全无小事<br /><span className="yellow">管理</span>少事故
                    </div>
                    <div id="earth" className="move">
                        <img src={componentData.imgUrl.logoPeopleUrl} className="img-fluid" />
                    </div>

                    <div className="login">
                        <div className="login-logo">
                            <img src={componentData.imgUrl.logoUrl} className="img-fluid" />
                        </div>
                        <div className="login-other">
                            <div onclick='toQzoneLogin()'><img src={componentData.imgUrl.logoIconQQ} /></div>
                            <div onclick='toweChat()'><img src={componentData.imgUrl.logoIconChart} /></div>
                            <div><img src={componentData.imgUrl.logoIconSine} /></div>
                        </div>
                        <div className="hr"><span>或</span></div>
                        <div className="login-form">
                            <Form className="login-form">
                                <Form.Item>
                                    {
                                        getFieldDecorator('UserName', {
                                            rules: [{ required: true, message: '请输入用户名' }]
                                        })(<Input
                                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder="请输入用户名"
                                        />)
                                    }
                                </Form.Item>
                                <Form.Item>
                                    {getFieldDecorator('Pwd', {
                                        rules: [{ required: true, message: '请输入密码' }]
                                    })(
                                        <Input
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            type="password"
                                            placeholder="请输入密码"
                                        />
                                    )}

                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit" className="login-form-button login-form-btn-submit" onClick={() => LoginUser()}>登陆</Button>
                                </Form.Item>
                            </Form>
                        </div>
                        <div className="login-regist">
                            没有帐号？<span id="ToRegist">立即注册</span>
                        </div>
                    </div>

                    <div className="regist">
                        <div className="regist-title">
                            手机注册<span><img src={componentData.imgUrl.logoUrl} height="40px" /></span>
                        </div>
                        <div className="regist-form">
                            <form method="POST" action="">
                                <code className="check_reg_phone"></code>
                                <div className="input-group mb-3">
                                    <div className="input-group-prepend">
                                        <span className="input-group-text">
                                            <span className="fa fa-mobile text-success"></span>
                                        </span>
                                    </div>
                                    <input type="text" className="form-control" name="regphone" id="regphone" placeholder="手机号码" />
                                </div>
                                <code className="check_reg_pwd"></code>
                                <div className="input-group mb-3">
                                    <div className="input-group-prepend">
                                        <span className="input-group-text">
                                            <span className="fa fa-unlock-alt text-success"></span>
                                        </span>
                                    </div>
                                    <input type="password" className="form-control" name="regpwd" id="regpwd" placeholder="密码" />
                                </div>
                                <code className="check_reg_pwd2"></code>
                                <div className="input-group mb-3">
                                    <div className="input-group-prepend">
                                        <span className="input-group-text">
                                            <span className="fa fa-unlock-alt text-success"></span>
                                        </span>
                                    </div>
                                    <input type="password" className="form-control" id="regcheckpwd" placeholder="确认密码" />
                                </div>
                                <code className="check_reg_code"></code>
                                <div className="input-group mb-3">
                                    <input type="text" className="form-control" placeholder="手机验证码" id="code" name="code" />
                                    <div className="input-group-append">
                                        <button type="button" className="input-group-text text-success getcode">获取验证码</button>
                                    </div>
                                </div>
                                <button type="button" id="regist" className="btn btn-success btn-block">注册</button>
                            </form>
                        </div>
                        <div className="otherLogin">
                            <div className="qq">
                                <img src={componentData.imgUrl.logoQQ} onclick='toQzoneLogin()' className="img-fluid" />
                            </div>
                            <div className="wx">
                                <img src={componentData.imgUrl.logoChart} onclick='toweChat()' className="img-fluid" />
                            </div>
                        </div>
                        <div className="login-login">
                            <span id="otherLogin">快捷登录</span>
                            <span id="phoneLogin">手机注册</span>
                            <span id="ToLogin">返回登录</span>
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
})
export const Center = (componentData) => {
    const dispatch = useDispatch()
    const { getFieldDecorator } = componentData.formConfig;
    function LoginUser() {
        componentData.formConfig.validateFields((err, values) => {
            if (!err) {
                const password = btoa(encodeURI(`${values.Pwd}Shenbo123`));
                const userLoginData = {
                    UserName: values.UserName,
                    Pwd: password
                }
                dispatch({
                    type: actionType.START_LOGIN,
                    payload: userLoginData
                })
                login(userLoginData)
            }
        });
    }

}

